{{extend name="layout/base-html"}}

{{block name="body"}}
<style>
    .xm-form-select {
        width: 100%;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label"><span class="x-red">*</span>名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{{$data.name|default=''}}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>请求方式</label>

                <div class="layui-input-block">
                    <div id="method" class="xm-form-select"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>路由</label>
                <div class="layui-input-block">
                    <textarea name="routes" placeholder="请输入路由名称|路由规则，多个路由回车分隔" class="layui-textarea">{{$data.routes|default=''}}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>

                <button class="layui-btn" lay-filter="{{$data ? 'edit' : 'add'}}" lay-submit="">
                    {{$data ? '修改' : '增加'}}
                </button>
            </div>
        </form>
    </div>
</div>

<script type="module">
    import { update, save } from "/static/admin/js/api/additional/admin-rule.js";
    import { rain } from "/static/admin/js/app.js";

    let rawMethods = JSON.parse('{{$methods|raw}}');

    let newMethods = [];
    rawMethods.forEach(item => { newMethods.push({name: item, value: item}); });

    xmSelect.render({
        ...rain.config.xmSelect,

        el: "#method",
        name: "method",
        initValue: '{{$data.method|default=""}}'.split('|'),
        layVerify: 'required',
        filterable: true,
        data: newMethods
    });

    layui.use(['form', 'layer'], () => {
            let form = layui.form;

            let event = '{{$data ? "edit" : "add"}}';

            // 监听事件
            formData(form, event, 'edit' === event ? {
                request: update,
                id: '{{$data.id|default=0}}',
            } : {
                request: save,
            });
        });
</script>
{{/block}}
